<!--  -->
<template>
  <div>
    <div class="editorLine">
      <label for="">{{ labelVal }}</label>
      <wEditor class="editorBox" @change="valChange" :value="inputVal"></wEditor>
    </div>
    <div v-html="editVal"></div>
  </div>
</template>

<script>
export default {
  props: {
    labelVal: {
      type: String,
      required: true,
    },
    inputVal: {
      type: String,
    },
  },
  data() {
    return {
      editVal: "",
    };
  },
  components: {},
  computed: {},
  mounted() {},
  methods: {
    valChange(val) {
      this.editVal = val;
      console.log(val);
    },
  },
};
</script>
<style  scoped>
.editorLine {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  margin-top: 16px;
}

.editorLine >>> .w-e-toolbar .w-e-menu {
  width: 25px;
}

label {
  text-align: right;
  display: inline-block;
  width: 170px;
  color: #878d94;
  letter-spacing: 4px;
  font-size: 16px;
}

.editorBox {
  width: 498px;
  height: 600px;
  margin: 0;
  margin-left: 24px;
  box-sizing: border-box;
  overflow-y: auto;
}
</style>